<template>
  <div class="app-container">


    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="70%" >
      <span>修改班级信息：</span>
      <div>
        <div class="app-container">
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form   label-width="80px" :model="formLabelAlign">
                <el-form-item label="名称">
                  <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="上课地址">
                  <el-input v-model="formLabelAlign.place"></el-input>
                </el-form-item>
                <el-form-item label="开课时间">
                  <el-date-picker
                    v-model="formLabelAlign.starttime"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                  <el-date-picker
                    v-model="formLabelAlign.endtime"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item  label="课表">
                  <el-table
                    :data="formLabelAlign.kebiao"
                    border
                    style="width: 100%">
                    <el-table-column
                      label="周一"
                      width="150">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.Monday"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="周二"
                      width="150">

                      <template slot-scope="scope">
                        <el-input v-model="scope.row.Tuesday"></el-input>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="周三"
                      width="150">

                      <template slot-scope="scope">
                        <el-input v-model="scope.row.Wednesday"></el-input>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="周四"
                      width="150">

                      <template slot-scope="scope">
                        <el-input v-model="scope.row.Thursday"></el-input>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="周五"
                      width="150">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.Friday"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="周六"
                      width="150">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.Saturday"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="周日"
                      width="150">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.Sunday"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doupdate()">确 定</el-button>
      </span>
    </el-dialog>
    <el-table
      :data="list"
      v-loading.body="listLoading"
      element-loading-text="Loading"
      :row-class-name="tableRowClassName"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="管理教师"  >
        <template slot-scope="scope">
          <span v-if="scope.row.master != undefined" > {{scope.row.master.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="上课地址"  >
        <template slot-scope="scope">
          {{scope.row.place}}
        </template>
      </el-table-column>
      <el-table-column label="课表"  >
        <template slot-scope="scope">

          <el-popover
            placement="top-start"
            title="标题"
            trigger="hover"
            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">

            <el-table :data="JSON.parse(scope.row.kebiao)">

              <el-table-column width="150" property="Monday" label="周一"></el-table-column>
              <el-table-column width="150" property="Tuesday" label="周二"></el-table-column>
              <el-table-column width="150" property="Wednesday" label="周三"></el-table-column>
              <el-table-column width="150" property="Thursday" label="周四"></el-table-column>
              <el-table-column width="150" property="Friday" label="周五"></el-table-column>
              <el-table-column width="150" property="Saturday" label="周六"></el-table-column>
              <el-table-column width="150" property="Sunday" label="周六"></el-table-column>
            </el-table>

            <el-button slot="reference">查看</el-button>
          </el-popover>

        </template>
      </el-table-column>
      <el-table-column label="开课时间"  >
        <template slot-scope="scope">
          {{scope.row.starttime}}
        </template>
      </el-table-column>
      <el-table-column label="结束时间"  >
        <template slot-scope="scope">
          {{scope.row.endtime}}
        </template>
      </el-table-column>
      <el-table-column label="状态"  >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="success">可用</el-tag>
          <el-tag v-else type="danger">不可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button type="primary" @click="doedit(scope.row)" size="mini">修改</el-button>
          <el-button v-if="scope.row.status == 0" @click="disable(scope.row)" type="danger" size="mini">关闭使用</el-button>
          <el-button v-else type="success" @click="disable(scope.row)"  size="mini">开放使用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      background
      layout="prev, pager, next"
      :current-page="listQuery.currentpage"
      :page-size="listQuery.pagesize"
      @current-change="fetchData"
      :total="listQuery.total">
    </el-pagination>
  </div>
</template>

<script>
  import { getClassRoomList,updateClassroom  } from "@/api/teacher";

  export default {
    data() {
      return {
        list: null,
        listLoading: true,
        dialogVisible:false,
        teacherlist:[],
        formLabelAlign:{
          kebiao:[
            {
              Monday:"",
              Tuesday:"",
              Wednesday:"",
              Thursday:"",
              Friday:"",
              Saturday:"",
              Sunday:"",
            }, {
              Monday:"",
              Tuesday:"",
              Wednesday:"",
              Thursday:"",
              Friday:"",
              Saturday:"",
              Sunday:"",
            }, {
              Monday:"",
              Tuesday:"",
              Wednesday:"",
              Thursday:"",
              Friday:"",
              Saturday:"",
              Sunday:"",
            }, {
              Monday:"",
              Tuesday:"",
              Wednesday:"",
              Thursday:"",
              Friday:"",
              Saturday:"",
              Sunday:"",
            }, {
              Monday:"",
              Tuesday:"",
              Wednesday:"",
              Thursday:"",
              Friday:"",
              Saturday:"",
              Sunday:"",
            }, {
              Monday:"",
              Tuesday:"",
              Wednesday:"",
              Thursday:"",
              Friday:"",
              Saturday:"",
              Sunday:"",
            },
          ]
        },
        classroomlist:[],
        listQuery:{
          currentpage:1,
          pagesize:20,
          name:"",
          total:0,
        }
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      doedit(e){
        var edititem = {}
        Object.assign(edititem,e)
        edititem.kebiao =  JSON.parse(edititem.kebiao)
        this.formLabelAlign = edititem;
        this.dialogVisible= true;
      },
      tableRowClassName({row}) {
        if (row.status == 1) {
          return 'warning-row';
        } else  {
          return 'success-row';
        }
        return '';
      },
      fetchData(e) {
        if(e != undefined) this.listQuery.currentpage = e;
        this.listLoading = true;
        getClassRoomList(this.listQuery).then((response) => {
          console.log("get list success")
          this.list = response.info;
          this.listQuery.currentpage = response.currentpage;
          this.listQuery.total = response.total;
          this.listQuery.totalpage = response.totalpage;
          this.listLoading = false;
        }).catch(err=>{
          this.listLoading = false;
        })
      },
      doupdate(){
        var edititem =  {};
        Object.assign(edititem,this.formLabelAlign)
        edititem.kebiao =  JSON.stringify(edititem.kebiao)
        updateClassroom(edititem).then(res=>{
          console.log(res)
        })
        this.dialogVisible=false;
      },
      disable:function(e){
        if(e.status == 0){
          e.status=1;
        }else {
          e.status=0;
        }
        updateClassroom(e).then(res=>{
          console.log(res);
        })
      }
    },
  };
</script>
<style>
  .pager{
    margin: 30px;
    float: right;
  }
  .el-table .warning-row {
    background: #ff6c61;
  }

  .el-table .success-row {
    background: #ffffff;
  }
</style>
